<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { ArrowLeftBold, ArrowRightBold, Clock } from '@element-plus/icons-vue';
import SearchView from '@/components/SearchView.vue'
import { blockTips, sortFieldMatch, timeAgo } from '@/utils/util';
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance()
const router = useRouter()
const block = ref(null)
const loadingtx = ref(true)
const blockList = ref([])


onMounted(() => {
    block.value = parseInt(router.currentRoute.value.params.id)
    getBlock()
})

const next = () => {
    router.push({ path: "/block/" + (block.value + 1) })
}
const prev = () => {
    router.push({ path: "/block/" + (block.value - 1) })
}
const getBlock = () => {
    var url = "/api/Scan/Block"
    var param = {
        "blockNumber": block.value
    }

    proxy.$axios.post(url, param).then((res) => {
        console.log(res)
        setTimeout(() => {
            loadingtx.value = false
        }, 500)
        if (res.code == 200) {
            blockList.value = Object.keys(res.data).map((item, i) => (
                // console.log(i)
                { name: item, value: res.data[item], tips: blockTips[i] || '' })
            )
            console.log(blockList.vaule)
        }
    })


}


</script>

<template>
    <div class="block_container bg_box">
        <div class="container">
            <SearchView>
                <div class="s_tit">
                    <h3>Block <span>#{{ block }}</span></h3>
                </div>
            </SearchView>
            <div class="overview_tit">
                <span class="ups">Overview</span>
            </div>

            <div class="bolck_table boxsh">
                <el-skeleton :rows="15" :loading="loadingtx" animated>
                    <ul>
                        <li v-for="(item, i) in blockList" :key="item.name">
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300" :content="item.tips">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>{{ sortFieldMatch(item.name) }}</span>
                                    </p>
                                </el-col>
                                <el-col :md="18">
                                    <template v-if="item.name === 'BlockHeight'">
                                        <div class="v_block">
                                            <p class="fbold">{{ item.value }}</p>
                                            <span @click="prev"><el-icon>
                                                    <ArrowLeftBold />
                                                </el-icon></span>
                                            <span @click="next"><el-icon>
                                                    <ArrowRightBold />
                                                </el-icon></span>
                                        </div>
                                    </template>
                                    <template v-else-if="item.name === 'Timestamp'">
                                        <p class="flex_ai"><el-icon>
                                                <Clock />
                                            </el-icon> {{ timeAgo(item.value * 1000) }} ( {{ new
                                                Date(item.value * 1000).toUTCString() }} )</p>
                                    </template>
                                    <template v-else-if="item.name === 'Transactions'">
                                        <p>
                                            <router-link v-if="item.value[0].Value > 0"
                                                :to="{ path: '/txs', query: { block: block } }">{{ item.value[0].Value }}
                                                {{ item.value[0].Remark }}</router-link>
                                            <span v-else>{{ item.value[0].Value }} {{ item.value[0].Remark }}</span>
                                            and {{ item.value[1].Value }} {{ item.value[1].Remark }} in this block
                                        </p>
                                    </template>
                                    <template v-else-if="item.name === 'Size'">
                                        <p>{{ item.value }} bytes</p>
                                    </template>
                                    <template v-else-if="item.name === 'Minedby'">
                                        <p><router-link :to="'/address/' + item.value">{{ item.value }}</router-link></p>
                                    </template>
                                    <template v-else-if="item.name === 'ParentHash'">
                                        <p><router-link :to="'/block/' + (block - 1)">{{ item.value }}</router-link></p>
                                    </template>
                                    <template v-else-if="item.name === 'GasUsed'">
                                        <p>{{ item.value }} <i>( {{ (item.value / blockList[i + 1].value * 100).toFixed(2)
                                        }} % )</i>
                                        </p>
                                        <el-progress style="width:20rem"
                                            :percentage="parseFloat((item.value / blockList[i + 1].value * 100).toFixed(2))"
                                            :stroke-width="3"></el-progress>
                                    </template>
                                    <template v-else>
                                        <p>{{ item.value }}</p>
                                    </template>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                </el-skeleton>
            </div>

            <div class="tips">
                <img src="../../assets/img/tips.png" alt="" />
                <p>Blocks are batches of transactions linked together via cryptographic hashes. Any tampering of a block
                    invalidates subsequent blocks as their hashes would be changed. Learn more about this page in our
                    Knowledge
                    Base.</p>
            </div>
        </div>
    </div>
</template>



<style lang="less" scoped>
// .fbold{font-weight: bold;}


.block_container {
    padding-bottom: 5rem;

    .bolck_table {

        ul {
            li {


                &:nth-of-type(13),
                &:nth-of-type(4),
                &:nth-of-type(8) {
                    border-bottom: 1px solid var(--color-border);
                    padding-bottom: 20px;
                    margin-bottom: 15px;
                }

            }
        }
    }
}
</style>